<template>
	<div>
		<view class="search-item">
			<input v-model="searchVal" placeholder="请输入查询内容或学生姓名"/>
			<button type="primary" :style="{backgroundColor: theme.primary}" @tap="search">查询</button>
		</view>
		<mescroll-uni @init="mescrollInit" :fixed="false" :up="upOption" :down="downOption" class="check-content">
			<view class="check-title" @tap="unCheckAppend = !unCheckAppend">
				<rich-text :nodes="subUnCheckTitle(unCheckData.studentCount)"></rich-text>
				<span class="arrow" :class="{'is-append':unCheckAppend}"></span>
			</view>
			<view v-if="unCheckAppend" class="check-item">
				<view v-for="(item, index) in unCheckData.list" :key="index" class="mescroll-col">
					<view class="mescroll-item">{{subText(item.studentNo + item.studentName, 15)}}</view>
				</view>
			</view>
			<view class="check-title" @tap="checkAppend = !checkAppend">
				<rich-text :nodes="subCheckTitle(checkData.studentCount)"></rich-text>
				<span class="arrow" :class="{'is-append':checkAppend}"></span>
			</view>
			<view v-if="checkAppend" class="check-item">
				<view v-for="(item, index) in checkData.list" :key="index" class="mescroll-col">
					<view class="mescroll-item">{{subText(item.studentNo + item.studentName, 15)}}</view>
				</view>
			</view>
		</mescroll-uni>
	</div>
</template>

<script>
	import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from 'mescroll-uni/mescroll-mixins.js';
	export default{
		name: 'singInfo',
		data(){
			return{
				theme: this.$theme,
				id: '',
				// 未签到
				unCheckData:{
					studentCount: 0,
					list: []
				},
				// 签到
				checkData:{
					studentCount: 0,
					list: []
				},
				// 搜索内容
				searchVal: '',
				// 未签到展开标记
				unCheckAppend: true,
				// 签到展开标记
				checkAppend: true
			}
		},
		computed:{
			//出勤小标题dom
			subCheckTitle:function(){
				return len=>{
					return `共<span style='color:#F44336'>${len}</span>人出勤`
				}
			},
			//缺勤小标题dom
			subUnCheckTitle:function(){
				return len=>{
					return `共<span style='color:#F44336'>${len}</span>人缺勤`
				}
			},
			//文字长度限定
			subText:function(){
				return (val, len)=>{
					if(!val){
						return ''
					}
					return val.length>len?`${val.substring(0, len)}...`:val
				}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getList()
		},
		//下拉刷新
		onPullDownRefresh(){
			this.searchVal = ''
			this.getList()
		},
		methods:{
			// 拉取签到列表
			getList(){
				this.$http.request({
					url: 'api/LivePush/GetCheckinList',
					method: 'GET',
					showLoading: true,
					data:{
						TimeTableId: this.id
					}
				}).then(resp=>{
					this.unCheckData = {
						studentCount: resp.unCheckStudentCount,
						list: resp.unCheckList
					}
					this.checkData = {
						studentCount: resp.checkStudentCount,
						list: resp.checkList
					}
					uni.stopPullDownRefresh()
				})
			},
			// 搜索
			search(){
				if(!this.searchVal){
					this.getList()
					return
				}
				let uncheckList = this.unCheckData.list.filter(item=>{
					return (item.studentNo + item.studentName).indexOf(this.searchVal) != -1
				})
				this.unCheckData = {
					studentCount: uncheckList.length,
					list: uncheckList
				}
				let checkList = this.checkData.list.filter(item=>{
					return (item.studentNo + item.studentName).indexOf(this.searchVal) != -1
				})
				this.checkData = {
					studentCount: checkList.length,
					list: checkList
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-item{
		width: 100vw;
		height: 100rpx;
		background-color: #f3f3f3;
		border-bottom: 1rpx solid #e2e2e2;
		display: flex;
		justify-content: space-around;
		align-items: center;
		input{
			width: 70vw;
			height: 50rpx;
			padding: 10rpx;
			border-radius: 4rpx;
			border: 1rpx solid #e2e2e2;
			background-color: #fff;
		}
		button{
			width: 15vw;
			height: 60rpx;
			font-size: 25rpx;
			margin: 0;
			display: flex;
			justify-content: center;
			align-content: center;
		}
	}
	.check-content{
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
		.check-title:active{
			font-weight: bold;
		}
		.check-title{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx;
			box-sizing: border-box;
			position: relative;
			border-bottom: 1rpx solid #f3f3f3;
			font-weight: 400;
			transition: font-weight .3ss;
			.arrow{
				position: absolute;
				right: 20rpx;
				line-height: 50rpx;
				width: 15rpx;
				height: 15rpx;
				border-top: 3rpx solid #333;
				border-right: 3rpx solid #333;
				transform: rotate(45deg);
				transition: transform .5s;
			}
			.is-append{
				transform: rotate(135deg);
			}
		}
		
		@keyframes fade-in{
			from{ opacity: 0; }
			to{ opacity: 1; }
		}
		.check-item{
			min-height: 200rpx;
			display: flex;
			flex-wrap: wrap;
			animation: fade-in .5s;
			.mescroll-col{
				width: 33.3%;;
				display: flex;
				.mescroll-item{
					display: flex;
					flex: 1;
					align-items: center;
					justify-content: center;
					box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
					margin: 10rpx;
					padding: 10rpx;
					color: #666;
					height: 60rpx;
				}
			}
		}
		
	}
</style>
